<template>
  <div class="menu-wrapper">
    <el-form ref="brandForm" :model="form"  label-width="100px">
      <div style="width: 100%;display: flex;align-items: flex-end;border-bottom: 1px #eee solid;margin-bottom: 20px">
        <span style="font-size: 18px;color:#409EFF;margin: 10px 0;">基本信息</span>
      </div>
      
      <el-form-item label="广告位名" :rules="{ required: true, message: '请输入品牌名', trigger: 'blur' }">
        <el-col :span="12">
          <el-input v-model="form.name"/>
        </el-col>
      </el-form-item>
     
      <el-form-item label="广告位说明">
          <el-col :span='12'>
      <el-input
            type="textarea"
             style='height:200px'
            placeholder="请输入内容"
            v-model="form.memo"
          >
         </el-input>
          </el-col>
   
      </el-form-item>
      <el-form-item>
        <el-col :span="12">
          <el-button type="primary"  :loading="clicked" @click="editBank('brandForm')">
            &nbsp&nbsp&nbsp&nbsp完 成&nbsp&nbsp&nbsp&nbsp
          </el-button>
        </el-col>
      </el-form-item>
    </el-form>

  </div>
</template>
<style scoped>
  .menu-wrapper{
    margin: 15px;
  }
  /deep/.el-textarea__inner{
      height: 200px;
  }
</style>
<script>
  import { EventBus } from '@/api/eventBus'
  import utils from '../../utils/utils.js'
  import {find,update } from '@/api/adPosition'
  import SingleUpload from '@/components/Upload/singleUpload'
  export default {
    name:'bank-edit',
    filters: {

    },
    components: {
      SingleUpload
    },
    data() {
      return {
        id:'',
        clicked: false, // 按钮防双击
        form: {
          code:'',
          name: '',
         
        },
      }
    },
    created() {
      this.getData()
    },
    activated() {
    },
    watch:{ // 路由地址不变的情况下,如果id变化则重新获取数据
      $route (newVal, oldVal) {
          console.log(newVal);
        if (newVal.name=='bank-edit' && newVal.query.id!=this.id) {
          this.getData()
        }
      }
    },
    methods: {
      getData () {
        this.id = this.$route.query.id
        const _this = this
        find(_this.id).then(response => {
            console.log(response);

          _this.form =response.data.adPosition;
          console.log(_this.form);
       
        }).catch(error => {
        })
      },
      editBank(form) {
        const _this = this
        this.$refs[form].validate((valid) => {
          if (valid) { // 校验表单
            _this.clicked = true
            update(_this.form).then(response => {
              console.log(response)
              _this.clicked = false
              EventBus.$emit('adPosition-edit', response.data)
              _this.$store.dispatch('tagsView/delView', _this.$route).then(({ visitedViews }) => {
                _this.$router.push({
                  path: '/adPosition/list'
                })
              })// 关闭当前tab回到列表
            }).catch(error => {
              _this.clicked = false

            })
          } else {
            return false
          }
        })
      }
    }
  }
</script>
